<!--
 * @Author: ChunLai
 * @Date: 2021-12-28 21:12:01
 * @LastEditTime: 2023-11-01 11:23:01
 * @Description: H5文档阅读页面
 * @FilePath: \0.newInsure\src\views\read\HtmlImg.vue
-->
<template>
  <div class="html-img-read bg-fff">
    <template v-if="['html', 'apiHtml'].includes(fileType)">
      <div
        class="notice-html"
        :class="{ 'api-html-box': ['apiHtml'].includes(fileType) }"
      >
        <iframe
          class="api-html"
          ref="iframe"
          v-if="['apiHtml'].includes(fileType)"
          frameborder="0"
        ></iframe>
        <div v-else v-html="fileObj.fileUrl || fileObj.html"></div>
      </div>
      <div v-if="['apiHtml'].includes(fileType)" class="flex-aj_cc tips">
        左右滑动,查看更多详细内容
      </div>
    </template>
    <div v-else class="notice-img" @click="handlePreview(fileObj.imgs)">
      <img
        v-for="(ele, idx) in fileObj.imgs"
        :key="idx"
        :src="ele + '?v=' + imgVersion"
      />
    </div>
    <van-image-preview v-model="showPreview" :images="images">
    </van-image-preview>
    <FooterBtns rightText="已阅读并确认" :btnNum="1" @saveForm="nextStep" />
  </div>
</template>

<script>
export default {
  name: 'ReadPageHtmlImg',
  props: ['fileObj'],
  data() {
    return {
      showPreview: false, // 新加图片预览
      images: [],
      imgVersion: new Date().getTime(),
      fileType: '',
    };
  },
  watch: {
    'fileObj.html'(val) {
      if (this.$refs.iframe) {
        const iframeHtml = this.$refs.iframe;
        iframeHtml.contentWindow.document.write(val); // 动态写入返回页面到iframe
      }
    },
  },
  created() {
    const querys = this.$route.query;
    if (querys.ftype) {
      this.fileType = querys.ftype;
    }
  },
  methods: {
    handlePreview(arrs) {
      this.images = arrs;
      this.showPreview = true;
    },
    nextStep() {
      this.$backRouter();
    },
  },
};
</script>

<style lang="less" scoped>
.html-img-read {
  padding-bottom: 100px;
}

.notice-html {
  padding: 0 14px;

  &.api-html-box {
    overflow: hidden;
    padding: 0;
    overflow-x: auto;
  }
}

.tips {
  color: #999999;
  line-height: 1;
}

.api-html {
  min-width: 880px;
  height: calc(100vh - 100px);
  padding: 20px;
}

.notice-img {
  width: 100%;

  img {
    display: block;
    max-width: 100%;
  }
}
</style>
